<template>
    <div class="w750 search">
        <header>
            <div class="header-box">
                <div class="header-search" style="margin: 7px 10px">
                    <input class="ser-input" type="text" v-model="searchText" @keyup.enter="enterSearch" placeholder="" />
                    <i class="ser-i"></i>
					<img v-if="searchText" class="position-absolute w-16p text-ccc" style="right: 10px; top: 8px;" src="@/assets/images/close2.png" @click="clearInput" />
                </div>
                <div class="header-mes" @click="enterSearch"><span class="mes-txt">搜索</span></div>
            </div>
        </header>

        <!-- <div class="search-touch" v-if="hotSearch">
            热搜
            <div class="hot-search">
                <div class="hot-tit">热搜</div>
                <div class="hot-con clearfix">
                    <span class="item" v-for="(item, index) in hotSearch" :key="index" @click="goSearch(item.msg)">{{ item.msg }}</span>
                </div>
            </div>
            热搜
        </div> -->

        <div class="search-touch" v-if="historySearch.length">
            <!-- 热搜 -->
            <div class="hot-search">
                <div class="hot-content">
                    <div class="hot-tit">搜索历史</div>
                    <i class="clear-icon" @click="clearKey"></i>
                </div>

                <div class="hot-con clearfix">
                    <span class="item" v-for="(item, index) in historySearch" :key="index" @click="goSearch(item)">{{ item }}</span>
                </div>
            </div>
            <!-- 热搜 -->
        </div>
    </div>
</template>

<script>
import { hotSearch } from 'api/search'
import { clearHistory } from 'utils/Cache'
import { store } from 'utils/Cache'

export default {
    data() {
        return {
            searchText: '', //搜索内容 v-molde
            searchRecord: [], //搜索历史
            hotSearch: null, //热搜
            historySearch: ''
        }
    },
    mounted() {
        let that = this

        //获取历史搜索
        this.historySearch = store.getHistory(store.History)

        // hotSearch().then(res => {
        //     if (res.status == 1) {
        //         this.hotSearch = res.result;
        //     }
        // });
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        //进去搜索列表
        enterSearch() {
            let searchText = this.trim(this.searchText)
            store.addToHistory(store.History, searchText)
            this.$router.push({
                path: `/searchList`,
                query: {
                    searchText: searchText,
                    source: 'text'
                }
            })
        },
        goSearch(text) {
            store.addToHistory(store.History, text)
            this.$router.push({
                path: `/searchList`,
                query: {
                    searchText: text,
                    source: 'text'
                }
            })
        },
        //清楚历史搜索
        clearKey() {
            this.$dialog
                .confirm({
                    title: '是否确认清空历史搜索'
                })
                .then(() => {
                    store.clearHistory(store.History)
                    this.historySearch = []
                })
                .catch(() => {
                    // on cancel
                })
        },
        //清除空格
        trim(input) {
            return input.replace(/^\s+|\s+$/, '')
        },
		clearInput() {
			this.searchText = ''
		}
    },
    components: {}
}
</script>

<style src="@/assets/css/search.css" scoped></style>
<style scoped>
.mar {
    margin: 7px 10px 7px 0 !important;
}
.search {
    min-height: 100% !important;
    background: #fff;
}
.hot-search .hot-tit {
    padding: 0;
    font-weight: bold;
}
.hot-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 10px;
}
</style>
